<template>
    <header>
        <div class="header">
            <h1>Todolist</h1>
            <input type="text" id="insert" @keyup.enter="sendMitt" v-model="value" v-focus>
        </div>
    </header>
    <doing :doingvalue='doingitem' @fn='fn'></doing>
    <done :donevalue='doneitem' @todoing='todoing'></done>
    <!-- 组件 -->


</template>

<script setup>
import IconCommunityVue from './icons/IconCommunity.vue';
import doing from './todolist/doing.vue'
import done from './todolist/done.vue';
import { ElButton } from 'element-plus'
import test from './todolist/test.vue';
import { ref, provide, reactive, inject } from 'vue';
import mitt from 'mitt';

let value = ''
let list = reactive([])
// 待办事项
let doingitem = reactive(JSON.parse(window.localStorage.getItem('doing'))) ? reactive(JSON.parse(window.localStorage.getItem('doing'))) : reactive([])

// 已完成事项
let doneitem = reactive(JSON.parse(window.localStorage.getItem('done'))) ? reactive(JSON.parse(window.localStorage.getItem('done'))) : reactive([])
const sendMitt = (e) => {
    if (e.target.value) {
        value = e.target.value
        e.target.value = ''
        doingitem.push({ 'item': value, 'status': false })
        window.localStorage.setItem('doing', JSON.stringify(doingitem))
    }
    else {
        alert('待办事项不能为空')
    }

}
const fn = (e) => {
    e.status = !e.status
    doingitem.forEach((item, index) => {
        if (item.status == true) {
            doneitem.push(item)
            doingitem.splice(index, 1)
            window.localStorage.setItem('done', JSON.stringify(doneitem))
            window.localStorage.setItem('doing', JSON.stringify(doingitem))
        }
    })
    console.log(doingitem)
    // doingitem.filter((item, index) => {
    //     if (item.status == true) {
    //         doingitem.splice(index,0)
    //     }

    // })
}
const todoing = (e) => {
    console.log(e)
    e.status = !e.status
    doneitem.forEach((item, index) => {
        if (item.status == false) {
            doingitem.push(item)
            doneitem.splice(index, 1)
            console.log(doneitem)
            window.localStorage.setItem('doing', JSON.stringify(doingitem))
            window.localStorage.setItem('done', JSON.stringify(doneitem))
        }
    })
    //     console.log(doingitem)
    // doingitem.filter((item, index) => {
    //     if (item.status == true) {
    //         doingitem.splice(index,0)
    //     }

    // })
}
// css绑定data属性 不能是数组，否则报错
</script>

<style lang="scss" scoped>
header {
    background: skyblue;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    position: relative;

    .header {
        width: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #insert {
        display: block;
        width: 70%;
        height: 35px;
        margin: 0;
        border-radius: 17px;
        border: none;
        outline: none;
        box-shadow: 0 0 10px #0000005c;
        padding:0 10px;
    }


}

.button {
    display: flex;
    justify-content: center;
}
</style>